Skip to main content

Image Lists

Type

widget

Description

Image Lists display a collection of images in an organized list.

An image list consists of several elements, each of which contains an image and, optionally, supporting content (ie a text label).

Compatibility and Support

OS

mac

windows

linux

ios

android

Platforms

desktop

mobile

web

Children Properties

Message

NameSummarySyntax
loadBeginningMessage generated before updating itemData property value.on loadBeginning
loadProgressThis message is sent when one of the tiles in the image list is finished loading.on loadProgress <pLoaded>, <pTotal>, <pUnresolvedImages>
loadFinishedThis message is sent when all the tiles in the image list have finished loading. Parameters:on loadFinished <pLoaded>, <pTotal>, <pUnresolvedImages>
itemMouseEnterThis message is sent when the mouse enter into an item's rectangle.on itemMouseEnter <pItemNumber>, <pItemProperties>
itemMouseLeaveThis message is sent when the mouse leaves into an item's rectangle.on itemMouseLeave <pItemNumber>, <pItemProperties>
longTouchSent when the touch persists.on longTouch <pButton>, <pItemNumber>, <pItemProperties>
itemClickedMessage sent when an item in the image list is clickedon itemClicked <pButton>, <pItemNumber>, <pItemProperties>
actionClickedMessage sent when an action icon in the image list is clickedon actionClicked <pButton>, <pItemNumber>, <pItemProperties>

Property

NameSummarySyntax
useTitleDefines if the title is displayed.get the useTitle of <widget> Syntax: set the useTitle of <widget> to { <true> | <false>}
titleStyleSpecifies the style of the title text of the image lists item.get the titleStyle of <widget> set the titleStyle of <widget> to <integer>
itemBorderColorSpecifies the color with which the borders of the image list are drawn.get the itemBorderColor of <widget> set the itemBorderColor of <widget> to {<RGB Color> | <HEX Color> | <Color name>}
subtitleColorThe color of the item's subtitle.get the subtitleColor of <widget> set the subtitleColor of <widget> to <integer>
subtitleFontThe font name of the item's subtitle.get the subtitleFont of <widget> set the subtitleFont of <widget> to <integer>
hoverIconColorThe color with which the icon is drawn when the pointer is over the item of image lists.get the hoverIconColor of <widget> set the hoverIconColor of <widget> to {<RGB Color> | <HEX Color> | <Color name>}
rowHeightThe height of one row in px.get the rowHeight of <widget> set the rowHeight of <widget> to {"auto" | <integer>}
categoriesThe category list of the image list items.get the categories of <widget>
variantThe variant to use.get the variant of <widget> set the variant of <widget> to {"standard"|"quilted"|"woven"|"masonry"|"single line"}
itemOpaqueSpecifies whether the interior of the image list items is opaque or transparent to the objects below.get the itemOpaque of <widget> set the itemOpaque of <widget> to {<true> | <false>}
accessibleWhen true, indicates the image is an accessibility element.get the accessible of <widget> set the accessible of <widget> to {<true> | <false>}
titleAlignSpecifies the align of the title text of the image lists item.get the titleAlign of <widget> set the titleAlign of <widget> to {"left" | "center" | "right"}
itemBarHeightDefines the height of the item bar.get the itemBarHeight of <widget> set the itemBarHeight of <widget> to <integer>
titleColorThe color of the item's title.get the titleColor of <widget> set the titleColor of <widget> to <integer>
itemBarColorThe color that the text protection of each item in the list of images will haveget the itemBarColor of <widget> set the itemBarColor of <widget> to {<RGB Color> | <HEX Color> | <Color name>}
itemBackColorSpecifies the color with which the background of the items in the list of images is drawn.get the itemBackColor of <widget> set the itemBackColor of <widget> to {<RGB Color> | <HEX Color> | <Color name>}
subtitleSizeThe size of the item's subtitle.get the subtitleSize of <widget> set the subtitleSize of <widget> to <integer>
useSubtitleDefines if the subtitle is displayed.get the useSubtitle of <widget> set the useSubtitle of <widget> to {<true> | <false>}
iconSizeThe size of the item's action icon.get the iconSize of <widget> set the iconSize of <widget> to <integer>
defaultIconAn Icon to be used as secondary action target.get the defaultIcon of <widget> set the defaultIcon of <widget> to <pIconName>
colsDefines the number of columns that the list of images will have.get the cols of <widget> set the cols of <widget> to <pColumnsNumber>
gapThe gap between items in px.get the gap of <widget> set the gap of <widget> to <integer>
itemsNumberReports the total number of items in a imagesList.get the itemsNumber of <widget>
titleFontThe font name of the item's title.get the titleFont of <widget> set the titleFont of <widget> to <integer>
itemBorderWidthSpecifies the thickness with which the borders of the image list are drawn.get the itemBorderWidth of <widget> set the itemBorderWidth of <widget> to <integer>
itemBarOpacityA value between 0 and 100 for the opacity of the Image lists itemBar.get the itemBarOpacity of <widget> set the itemBarOpacity of <widget> to <integer>
themeDataThe theme mappings of this widgetset the themeData of <widget> to {<array>} get the themeData of <widget>
subtitleStyleSpecifies the style of the subtitle text of the image lists item.get the subtitleStyle of <widget> set the subtitleStyle of <widget> to <integer>
itemDataSorted array with the list of images to load and their properties.get the itemData of <widget> set the itemData of <widget> to <pImageListArray>
itemBarDefines if the title bar is used.get the itemBar of <widget> set the itemBar of <widget> to { <true> | <false>}
hilitedIconColorThe color of the highlighted action icon that all items will have.get the hilitedIconColor of <widget> set the hilitedIconColor of <widget> to {<RGB Color> | <HEX Color> | <Color name>}
subtitleAlignSpecifies the align of the subtitle text of the image lists item.get the subtitleAlign of <widget> set the subtitleAlign of <widget> to {"left" | "center" | "right"}
itemThreeDSpecifies whether an item of image lists appears to stick out of or recede into the screen.get the itemThreeD of <widget> set the itemThreeD of <widget> to {<true> | <false>}
titleSizeThe size of the item's title.get the titleSize of <widget> set the titleSize of <widget> to <integer>
positionPosition of the title bar.get the position of <widget> set the position of <widget> to {<below> | <bottom> | <top>}
defaultSourceA static image to display while loading the image source.get the defaultSource of <widget> set the defaultSource of <widget> to {<Image ID> | <Image Name> }
backgroundOpacityA value between 0 and 100 for the opacity of the Image lists background.get the backgroundOpacity of <widget> set the backgroundOpacity of <widget> to <integer>
actionPositionThe position of the icon to use as the secondary action target.get the actionPosition of <widget> set the actionPosition of <widget> to {<left>| <right>}
useActionIconDefines if the action icon is used.get the useActionIcon of <widget> set the useActionIcon of <widget> to { <true> | <false>}
iconColorThe color of the action icon that all items will have.get the iconColor of <widget> set the iconColor of <widget> to {<RGB Color> | <HEX Color> | <Color name>}